<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
    <head>
        <meta http-equiv="Content-Type">
        <meta content="text/html; charset=utf-8">
        <meta charset="utf-8">
        <title>我为西恩续一秒</title>   
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="email=no">
        <meta name="show-image" content="http://www.66play.com/Public/App/cndota/images/cndotashare.jpg" />
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/App/cndota/mobile/css/index.css" />
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/App/cndota/mobile/css/animations.css" />
        <script type="text/javascript">
            {:C('GLOBAL_BDHM')}
        </script>
    </head>
    <body>
    <div id="loading">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
    <div id="page-content">
        <div class="page page-1 page-current">
            <div class="wrap">
              <img class="img_3 pt-page-moveIconUp" src="__PUBLIC__/App/cndota/mobile/images/icon_up.png" />
            </div>
        </div>
        <div class="page page-2 hide">
            <div class="wrap">
               <h1><img src="__PUBLIC__/App/cndota/mobile/images/title1.png"/></h1> 
               <button class="see-rule-btn orange font24" onclick="seeruleDialog(1)">查看活动规则></button>
               <ul class="prize-img orange">
                <!-- ko foreach:giftList -->
                <li class="prize-li" data-bind="css:{'reach':unlock}, click:play">
                    <p>
                        <img src="" data-bind="attr:{'src':logo}">
                        <!-- ko if: !unlock -->
                        <span class="unlock"></span>
                        <span class="indicator absolute"></span>
                        <span class="need-num absolute gray2 font20">
                            还需
                            <b class="font30" data-bind="text:rest"></b>
                        </span>
                        <!-- /ko -->
                        <span class="font24 title" data-bind="text:text"></span>
                    </p>
                </li>


                <!-- /ko -->
                  <li class="prize-li"><p><img src="__PUBLIC__/App/cndota/mobile/images/prize09.jpg">
                    <span class="unlock"></span>
                    <span class="indicator absolute"></span>
                  <!-- <span class="need-num absolute gray2 font20">还需<b class="font30">100</b></span> -->
                    <span class="font24 title">神秘大奖</span>
                  </p>
                  </li>
                </ul>
                <div class="font26 orange footer-btn">
                    <span>共续命<em class="red" data-bind="text:count.curCount"></em>秒</span>
                    <button class="xumi-btn font46 white JS-a1s" onclick="a1s()">+1S</button>
                    <span>已累积<em class="red" data-bind="text:count.gift"></em>个至宝</span>
                </div>
                </div>
        </div>
        <div class="page page-3 hide">
            <div class="wrap">
               <h1><img src="__PUBLIC__/App/cndota/mobile/images/title2.png"/></h1> 
               <button class="see-rule-btn orange font24" onclick="seeruleDialog(2)">查看活动规则></button>
               <ul class="teams" data-bind="foreach:teamList">
                    <li class="" data-bind="css:{'active':$index() == 0}">
                        <p>
                            <img src="" data-bind="attr:{'src':logo},click:click" /> 
                        </p>
                        <span class="font24 white" data-bind="text:name"></span>
                    </li>
               </ul>
               <div class="font26 orange footer-btn">
                    <button class="xumi-btn font36 white JS-forecast" onclick="forecast()">兹瓷他们</button>
                </div>
            </div>
        </div>
        <div class="page page-4 hide">
            <div class="wrap">
               <h1><img src="__PUBLIC__/App/cndota/mobile/images/title3.png"/></h1> 
               <ul class="match-ullist" data-bind="foreach:raceList">
                    <li>
                        <a href="" class="display-box font24" data-bind="attr:{'href':matchLink[0].link}">
                            <p class="match-li-left">
                                <img src="" data-bind="attr:{'src':team1.logo}"/>
                                <span data-bind="text:team1.name"></span>
                            </p>
                            <p class="match-mes box-flexo">
                                <span class="font20" data-bind="text:time"></span>
                                <span>
                                    <b class="num0 font48" data-bind="text:team1.score">0</b>
                                    <b class="colon">:</b>
                                    <b class="num0 font48" data-bind="text:team2.score">0</b>
                                </span>
                            </p>
                            <p class="match-li-left">
                                <img src="" data-bind="attr:{'src':team2.logo}"/>
                                <span data-bind="text:team2.name"></span>
                            </p>
                        </a>
                    </li>
               </ul>
               <div class="font26 orange footer-btn">
                    <a class="xumi-btn font36 white" onclick="downloadDialog()" href="javascript:;">下载APP</a>
                </div>
            </div>
        </div>
        <div class="page page-5 hide">
            <div class="wrap">
                <h1><img src="__PUBLIC__/App/cndota/mobile/images/title4.png"/></h1> 
                <p class="illustrates gray font24"><span>活动说明：</span>
                <span>将活动页面分享给你的小伙伴，邀请你的小伙伴一起为西恩刀塔加油，每有一个小伙伴参与你都会获得一定的积分，你可以在66Play APP中使用积分来兑换刀币和饰品皮肤等。</span>
                <span>活动规则：</span>
                <span>1.分享此活动页面即可获得500积分，每有一位小伙伴参与你都可以获得200积分,1000积分即可兑换1000刀币</span>
                <span>2.积分只能在66Play APP中兑换，分享成功后积分会自动添加到你的账号中。</span></p>
               <button class="see-rule-btn orange font24" onclick="seeruleDialog(3)">查看活动规则></button>

              <div class="font26 orange footer-btn absolute">
                    <a class="xumi-btn font32 white" onclick="downloadDialog()" href="ly66play://66play?type=event&id=&url=http%3a%2f%2fwww.66play.com%2fapp%2fcndota&nickname=">打开APP分享</a>
              </div>
            </div>
        </div>
    </div>
    <!--积分规则弹窗S-->
        <div class="rulepop rulepop-1 relative">
            <h1 class="orange font30">活动规则</h1>
            <p class="gray2">
                <span>活动说明：</span>
                <span>在6月6日至6月12日比赛期间，玩家每天可以参与一次“我为西恩续一秒”活动。</span>
                <span>随着为西恩刀塔续命秒数的不断增加，奖品池中也会不断解锁新的奖品。</span>
                <span>全部奖品将会在比赛结束后送出，中奖名单将会在66Play官方微博中公布。大家一起为西恩刀塔加油！<br><br></span>
                <span>活动规则：</span>
                <span>1.初始奖品池为1个至宝，每为西恩刀塔续命2000秒就会再增加一个至宝。</span>
                <span>2.当续命时间达到特定数字后还会解锁额外的特殊奖励。</span>
                <span>3.全部奖品将以随机抽取的方式送出，请关注66Play的官方微博@66Play电子竞技。</span>
            </p>
            <em class="close absolute" onclick="closeDialog()"></em>
        </div>
        <div class="rulepop rulepop-2 relative">
            <h1 class="orange font30">活动规则</h1>
            <p class="gray2">
                <span>在6月6日至6月12日比赛期间，玩家每天可以参与一次“我为西恩续一秒”活动。</span>
                <span>在6月12日春季赛总决赛前可以参与春季赛冠军预测，我们将会为预测正确的玩</span>家送出10个至宝，如果冠军是由中国队获得，我们将会额外再送出10个至宝。
                <span>中奖名单会在活动结束后于66Play官方微博中公布。</span>
                <span>全部奖品将以随机抽取的方式送出，请关注66Play的官方微博@66Play电子竞技。</span>
            </p>
            <em class="close absolute" onclick="closeDialog()"></em>
        </div>
        <div class="rulepop rulepop-3 relative">
            <h1 class="orange font30">积分规则</h1>
            <p class="gray2">
                <span>每一个使用66Play的小伙伴，只要完成以下的任务，就可以获得积分奖励，积分可以在积分商城兑换刀币或饰品皮肤。<br><br></span>

                <span>新手任务：</span>
                <span>注册增加积分100。</span>
                <span>个人资料全部设置完成，增加积分200。</span>
                <span>首次设置语音签名增加积分100。<br><br></span>

                <span>每日任务：</span>
                <span>每日登录签到增加积分10</span>
                <span>每日评论增加积分上限为20，每条评论增加积分2。</span>
                <span>每日点赞增加积分上限为10，每个点赞增加积分1。</span>
                <span>每日发布视频增加积分上限为100，每个视频增加积分10。</span>
                <span>每日分享增加积分上限为20，每条转发增加积分5。<br><br></span>

                <span>积分商城：</span>
                <span>积分数量达到一定程度之后，可以选择进入积分商城兑换想要的奖品。部分奖品数量有限，先到先得。每隔一段时间会更新一次奖品，大家要注意哦O(∩_∩)O</span>

            </p>
            <em class="close absolute" onclick="closeDialog()"></em>
        </div>
    <!--积分规则弹窗E-->
    <!--下载APP弹窗S-->
        <div class="downloadpop relative gray2 font30">
            <p class="downloadp"><span>您还没下载66Play <br/>APP下载安装后才能参加分享赢刀币的活动哦~快来下载吧。<br/>
            <font style="color:red;">请在默认浏览器中打开下载</font></span>
            <!-- <em class="close absolute" onclick="closeDialog()"></em> -->
                <span class="font26 orange footer-btn">
                   <a class="xumi-btn font36 white" onclick="downloadDialog()" href="{:U('Home/Download/index')}">下载APP</a>
                   <!-- <button class="xumi-btn font36 white" onclick="downloadDialog()" href="">下载APP</button> -->
                </span>
            </p>
        </div>
    <!--下载APP弹窗弹窗E-->
    <!--视频弹窗S-->
     <video controls="controls" onClick="closevideo()"></video>
    <!--视频弹窗E-->
    <div id="share" onClick="closeDialog()">
    </div>
    <script src="__PUBLIC__/App/cndota/mobile/js/jquery-2.1.4.min.js"></script>
    <script src="__PUBLIC__/App/cndota/js/knockout-2.3.0.js"></script>
    <script src="__PUBLIC__/App/cndota/mobile/js/zepto.min.js"></script> 
    <script src="__PUBLIC__/App/cndota/mobile/js/touch.js"></script>
    <script src="__PUBLIC__/App/cndota/mobile/js/plugin.js"></script>
    <script src="__PUBLIC__/App/cndota/mobile/js/index.js"></script>
    <script type="text/javascript">
        document.onreadystatechange = loading; 
        function loading(){
            if(document.readyState == "complete")
            { 
                $("#loading").hide();
                $("#content").show();
            }
        }

        window._THIS = {
            matchLink : "{:U('Home/Share/match')}",
            downloadUrl : "{:U('Home/Download/index')}",
        };
        var curCount = {$curCount};
        var giftList = {$giftList|json_encode};
        var teamList = {$teamList|json_encode};
        var raceList = {$raceList|json_encode};
        var forecastTeamId = {$forecast};
        var isA1s = {$a1s};

        viewModel = {
            giftList : ko.observableArray([]),
            count : {
                curCount : ko.observable(curCount),
                gift : ko.observable(1),
            },
            teamList : ko.observableArray([]),
            isForecast : ko.observable(false),
            raceList : ko.observableArray([]),
        };
        ko.applyBindings(viewModel);
        loadGiftData();
        loadData();

        function loadGiftData() {
            viewModel.count.curCount(curCount);
            viewModel.count.gift(parseInt(curCount/2000)+1);
            var list = [];
            $.each(giftList, function(index, el) {
                var gift = {
                    video_id : el.video_id,
                    name : el.name,
                    logo : el.logo,
                    count : el.unlockcount,
                    unlock : curCount >= el.unlockcount,
                    rest : el.unlockcount - curCount,
                    video_uri : el.video_uri,
                    play : function(obj, e) {
                        showvideo(obj.video_uri);
                    }
                };
                gift.text = gift.name+ (gift.unlock?' 已解锁！':'');

                list.push(gift);
            });
            viewModel.giftList(list);
            if (isA1s) {
                $('.JS-a1s').css({
                    "background": "url(__PUBLIC__/App/cndota/mobile/images/button_active.png) 0 0 no-repeat",
                    "backgroundSize": "contain"
                });
                $('.JS-a1s').html("明天再来+1S");
                $('.JS-a1s').removeClass("font46");
                $('.JS-a1s').addClass("font30");
                $('.JS-a1s').attr('disabled', true);
            }
        }
        var teamObj;
        function loadData() {
            var list1 = [];
            $.each(teamList, function(index, el) {
                var team = el;
                team.count = ko.observable(el.count);
                team.click = function(obj, e) {
                    $('.page-3').find('li.active').removeClass('active');
                    $(e.target).parents('li').addClass('active');
                    teamObj = obj;
                }

                if (index == 0) {
                    teamObj = team;
                }
                list1.push(team);
            });
            viewModel.teamList(list1);

            if (forecastTeamId > 0) {
                $('.JS-forecast').css({
                    "background": "url(__PUBLIC__/App/cndota/mobile/images/button_active.png) 0 0 no-repeat",
                    "backgroundSize": "contain"
                });
                $('.JS-forecast').html("您已经兹瓷过了");
                $('.JS-forecast').removeClass("font36");
                $('.JS-forecast').addClass("font30");
                $('.JS-forecast').attr('disabled', true);
            }

            var list2 = [];
            $.each(raceList, function(index, el){
                var race = {
                    matchLink : [
                        {link:'javascript:;'},
                    ],
                    team1 : {
                        name : el.team[0].name,
                        logo : el.team[0].logo,
                        score : el.score[0]
                    },
                    team2 : {
                        name : el.team[1].name,
                        logo : el.team[1].logo,
                        score : el.score[1]
                    },
                    time : el.race_date.substring(5) + ' ' + el.race_hour,
                };
                if (el.races && el.races.length > 0) {
                    race.matchLink = [];
                    for (var i = 0; i < 3 && i < el.races.length; i++) {
                        race.matchLink.push({
                            link : _THIS.matchLink + '?id=' + el.races[i]
                        });
                    }
                }

                list2.push(race);
            });
            viewModel.raceList(list2);
        }

        function a1s() {
            $.get("{:U('Cndota/a1s')}", function(data) {
                if (data.state == -2) {
                    location.href = "{:U('Home/User/login')}";
                    return;
                }
                if (data.state == 0) {
                    curCount++;
                    isA1s = true;
                    loadGiftData();
                }
            });
        }
        function forecast() {
            var team_id = teamObj.id;
            $.post("{:U('Cndota/forecast')}", {team_id: team_id}, function(data, textStatus, xhr) {
                if (data.state == -2) {
                    location.href = "{:U('Home/User/login')}";
                    return;
                }
                if (data.state == 0) {
                    $('.JS-forecast').css({
                        "background": "url(__PUBLIC__/App/cndota/mobile/images/button_active.png) 0 0 no-repeat",
                        "backgroundSize": "contain"
                    });
                    $('.JS-forecast').html("您已经兹瓷过了");
                    $('.JS-forecast').removeClass("font36");
                    $('.JS-forecast').addClass("font30");
                    $('.JS-forecast').attr('disabled', true);
                }
            });
        }
    </script>
    </body>
    
</html>
